$(function($){
	
	$.fn.videocontrolbar = function(options){
	
		var defaults = {
			video: "video",
			fade_in_speed : 200,
			fade_out_speed : 200,
			width : 600,
			height : 350,
			video_name : "Video",
			button_hover_color : '#A6214C'
		};
		
		var options = $.extend(defaults, options);

		var video = document.getElementById(options.video);
		var timeDrag = false;
		var playState = 1; // 0: stop  1: play  2: pause  3: finished
		var _full = 0; // 0 : normal mode 1:full screen mode
		var controlbar_visible = 1; // 0: visible 1: invisible		
		
		var channelNo = -1;
		var channelName = '';
		var progInfo;
		var progName = '';
		/* FIXME
		channelNo =	broadcast.getCurrentChannelNumber();
		channelName = broadcast.getCurrentChannelName();
		progInfo = broadcast.getCurrentProgram();
		progName = broadcast.progInfo.title;
		*/
		var caption = '[' + channelNo + '] ' + channelName + '\n' + progName;
		
		$('.videoContainer').append(
				'<div class="caption">' + caption + '</div>' +
				'<div class="control"><div class="topControl">' +
				'<div class="btmControl"><div class="btnPrev btn" title="Channel Down"></div>' +
				'<div class="btnNext btn" title="Channel Up"></div>' +
				'<div class="btnFS btn clickable" title="Switch to full screen"></div>' +
				'<div class="volume" title="Set volume">	<span class="volumeBar"></span>	</div></div></div> <div class="loading"></div>');
		$('.control').show().css({'bottom':-70});
		$('.caption').show().css({'top':-60});
		
		/*
		var video_width = video.width;
		var video_height = video.height;
		
		if(options.width ==-1){	var container_width = video_width;}
		else {var container_width = options.width;}
		
		if(options.height == -1){var container_height = video_height;}
		else {var container_height = options.height;}
	*/
		
		$('.clickable').hover(function(){
			$(this).css({'background-color': options.button_hover_color});
		}, function(){
			$(this).css({'background-color': '#242424' });
		});
		
		$('.videoContainer')
		.append('<div id="init"></div>')
		.hover(function() {	
			$('.control').stop().animate({'bottom':0}, options.fade_in_speed);
			$('.caption').stop().animate({'top': 0}, options.fade_in_speed);
			controlbar_visible = 0;
		}, function() {
			if(!timeDrag){
				$('.control').stop().animate({'bottom':-70}, options.fade_out_speed);
				$('.caption').stop().animate({'top':-60}, options.fade_out_speed);
				controlbar_visible = 1;
			}
		})
		.on('click', function() {
			$('#init').remove();
			//$('.btnPlay').addClass('paused');
			$(this).unbind('click');
			//video.play(1);
		});
		$('#init').fadeIn(200);
		
		//CONTROLS EVENTS
		// When Channel Down button is clicked
		$('.btnPrev').click(function() { broadcast.channelDown(); } );
		
		// When Channel up button is clicked
		$('.btnNext').click(function() { broadcast.channelUp(); } );
				
		// Stretch to full screen when full-screen button was clicked
		$('.btnFS').click(function() {
			if(_full ==0){
				$('.btnFS').addClass('fulled');
				$('.videoContainer').css('width',1280);
				$('.videoContainer').css('height',720);
				video.width = 1280;
				video.height = 720;
				_full=1;
			}
			else{
				$('.btnFS').removeClass('fulled');
				$('.videoContainer').css('width', options.width);
				$('.videoContainer').css('height', options.height);
				video.width = video_width;
				video.height = video_height;
				_full=0;
			}
		});
			
		
		// remote control button event
		$(document.documentElement).keydown(function(e){
			if (e.keyCode==39){// right
				
			} else if (e.keyCode==37){//left
				
			} else if (e.keyCode == 38){ // up
				broadcast.channelUp();
			} else if (e.keyCode == 40){// down
				broadcast.channelDown();
			}
			
			// show the control bar for secs
			$('.control').stop().animate({'bottom':0}, options.fade_in_speed);
			$('.caption').stop().animate({'top': 0}, options.fade_in_speed);
			controlbar_visible = 0;
			/*
			$('.control').stop().animate({'bottom':-70}, options.fade_out_speed);
			$('.caption').stop().animate({'top':-60}, options.fade_out_speed);
			controlbar_visible = 1;
			*/
		});
		
		
		$.fn.playTime(options);
		/*
		video.onPlayStateChange = processPlayStateChangeFunction;
		
		var processPlayStateChangeFunction = function(){
			var playInfo = video.mediaPlayInfo();
			if(playState ==1){
				alert("ww");
			}
		}*/
	};
	
	$.fn.playTime = function(o){
		var video = document.getElementById(o.video);
		var playInfo = video.mediaPlayInfo();
		$('.current').text(""+playInfo.duration);
		$('.duration').text(""+video.playTime);
	};
	
	
});
